<template>
  <div class="bill-detail-box">
    <div class="pay-img-box">
      <img src="@icon/successPay.png" alt="" class="pay-img">
    </div>
    <h3 class="title">{{ titleTxt }}</h3>
    <h3 class="amount">{{ successMsg }}</h3>
    <div class="staging-box">确定</div>

    <div class="img-box">
      <img src="@icon/皇冠.jpg" alt="">
    </div>
  </div>
</template>

<script>
import {globalMethods} from "../common/mixins.js"

export default {
  name: "billDetail",
  mixins: [globalMethods],
  data() {
    return {
      titleTxt: '',
      successMsg: ''
    }
  },
  mounted() {
    let {type, cardNum} = this.$route.query
    console.log(type)
    switch (type) {
      case 'agreedSet':
        this.titleTxt = '约定还款设置成功'
        this.successMsg = `您已为信用卡 ${cardNum} 约定还款设置成功`
        break;
      case 'otherPayment':
        this.titleTxt = '为他人还款成功'
        this.successMsg = `您已为信用卡 ${cardNum} 还款成功`
        break;
      case 'otherDelete':
        this.titleTxt = '删除成功'
        this.successMsg = `您已删除银行卡 ${cardNum} 成功`
        break;
        case 'billRepaySuccess':
        this.titleTxt = '还款成功'
        this.successMsg = `您已为信用卡 ${cardNum} 还款成功`
        break;

    }
  }
}
</script>

<style lang="stylus" scoped>
.staging-box
  display flex
  width 686px
  height 88px
  background #FFA900
  border-radius 8px
  color #fff
  font-size 36px
  align-items center
  justify-content center
  margin 30px auto

.bill-detail-box
  display flex
  width 100%
  flex-direction column
  background #fff
  min-height 100vh
  color #333

  .pay-img-box
    display flex
    align-items center
    justify-content center
    padding-bottom 63px
    padding-top 120px

    .pay-img
      width 180px
      height 180px

  .title
    padding 52px 0 120px
    display flex
    align-items center
    justify-content center
    font-size 36px
    font-weight 400
    background #fff

  .amount
    display flex
    align-items center
    justify-content center
    padding-bottom 120px
    font-weight 400
    background #fff
    color #666
    font-size 32px

  .detail-info
    padding 0 30px
    background #fff
    display flex
    flex-direction column
    font-size 32px

    .info-item
      display flex
      align-items center
      justify-content space-between
      margin-bottom 47px

      .text-gary
        color #666

    .dispute
      font-size 24px
      height 63px
      display flex
      align-items center
      justify-content flex-end
      color #FFA900
      border-top 1px solid #f7f7f7

  .img-box
    padding 30px 32px
    height 220px

    img
      width 100%
      height 100%
</style>
